<template>
    <div class="questions">
        <h3>编程面试题</h3>
        <go-back></go-back>
        <header>
            <h4>{{ arr[0].text }}面试题</h4>
        </header>
        <div class="content">
            <ul>
                <li v-for="(item, index) in arr" :key="index">
                    <p>【{{ item.qid }}】{{ item.question }}</p>
                    <p class="answer">答：</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script lang="ts" setup>
import GoBack from '../components/GoBack.vue';
import { ref } from 'vue'

const arr = ref( [
            {
                hid: 1,
                text: "HTML/CSS",
                qid: "1",
                question: "HTML5新特性有哪些？",
            },
            {
                hid: 1,
                text: "HTML/CSS",
                qid: 2,
                question: "CSS3新特性有哪些？",
            },
            {
                hid: 1,
                text: "HTML/CSS",
                qid: 3,
                question: "HTML5的语义化标签有哪些？",
            },
            {
                hid: 2,
                text: "JavaScript",
                qid: 1,
                question: "JavaScript的基本数据类型有哪些？",
            },
            {
                hid: 2,
                text: "JavaScript",
                qid: 2,
                question: "JavaScript的函数有哪些？",
            },
            {
                hid: 2,
                text: "JavaScript",
                qid: 3,
                question: "JavaScript的作用域有哪些？",
            },
            {
                hid: 2,
                text: "JavaScript",
                qid: 4,
                question: "JavaScript的原型链有哪些？",
            },
            {
                hid: 3,
                text: "jQuery",
                qid: 1,
                question: "jQuery的选择器有哪些？",
            },
            {
                hid: 3,
                text: "jQuery",
                qid: 2,
                question: "jQuery的动画效果有哪些？",
            },
            {
                hid: 3,
                text: "jQuery",
                qid: 3,
                question: "jQuery的AJAX有哪些？",
            },
            {
                hid: 3,
                text: "jQuery",
                qid: 4,
                question: "jQuery的事件有哪些？",
            },
            {
                hid: 4,
                text: "Vue.js",
                qid: 1,
                question: "Vue.js的生命周期有哪些？",
            },
            {
                hid: 4,
                text: "Vue.js",
                qid: 2,
                question: "Vue.js的组件有哪些？",
            },
            {
                hid: 4,
                text: "Vue.js",
                qid: 3,
                question: "Vue.js的路由有哪些？",
            },

        ]);




</script>

<style lang="less" scoped>
@import '../static/less/variable.less';

.questions {
    padding: @pad;

    header {
        text-align: center;
        margin-top: 60px;
        margin-bottom: 20px;
        background: linear-gradient(to bottom, #ffffff, #74c368);
        padding: 20px 0;

        h4 {
            font-size: 25px;
            color: #fff;
            text-shadow: #000000 1px 1px 2px;
        }
    }

    .content {
        padding: @pad;

        li {
            margin-bottom: 10px;
            font-size: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ccc;

            .answer {
                padding: 10px 0 0 15px;
            }
        }
    }
}
</style>